<!--
 * @Author: XXX
 * @Date: 2022-01-05 08:34:45
 * @LastEditTime: 2022-01-06 14:57:58
 * @LastEditors: XX
 * @Description: 
 * @FilePath: \am-dashboard\src\pages\government\components\Left2.vue
 * 别乱动！
-->
<template>
  <div id="left2_container" style="height: 95%"></div>
</template>
<script>
// 导入图表构造函数
import { Pie } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = [
        { type: "在线", value: 3 },
        { type: "离线", value: 2 },
      ];
      const piePlot = new Pie(left2_container, {
        appendPadding: 10,
        data,
        angleField: "value",
        colorField: "type",
        radius: 1,
        innerRadius: 0.64,

        label: {
          type: " inner  ",
          offset: "-50%",
          autoRotate: false,
          style: {
            textAlign: "center",
          },

          formatter(v) {
            return v.value + "台";
          },
        },

        statistic: {
          title: {
            offsetY: -8,
          },
          content: {
            offsetY: -4,
          },
        },

        // 添加 中心统计文本 交互
        interactions: [
          { type: "element-selected" },
          { type: "element-active" },
          {
            type: "pie-statistic-active",
            cfg: {
              start: [
                {
                  trigger: "element:mouseenter",
                  action: "pie-statistic:change",
                },
                {
                  trigger: "legend-item:mouseenter",
                  action: "pie-statistic:change",
                },
              ],
              end: [
                {
                  trigger: "element:mouseleave",
                  action: "pie-statistic:reset",
                },
                {
                  trigger: "legend-item:mouseleave",
                  action: "pie-statistic:reset",
                },
              ],
            },
          },
        ],
      });
      // 执行绘画渲染
      piePlot.render();
    },
  },
  // vue实例完全挂载到页面上
  mounted() {
    this.initChart();
  },
};
</script>